<template>
  <div>
    <van-row>
      <van-col span="24">
        <van-nav-bar
            title="确认订单"
            :fixed="true"
            placeholder
            @click-left="Return"
        >
          <template #left>
            <van-icon  style="font-weight: bolder;" color="#000000"  size="22" name="arrow-left" />
          </template>
        </van-nav-bar>
      </van-col>
      <van-col span="24" style="margin-top: 10px;">
        <div style="margin: 0 auto; width: 92%;height: 100%;">
          <van-notice-bar scrollable color="#1989fa" background="#ecf9ff" left-icon="info-o">
                温馨提示：适量点餐请勿浪费
          </van-notice-bar>
        </div>
      </van-col>
      <van-col span="24" style="margin-top: 10px;">
        <!--收货地址-->
        <van-cell-group  inset>
          <van-cell :border="false"  center to="/PayAddress"  is-link >
            <template #title>
                <span style="font-size: 1.5em;font-weight: bolder;">厦门工学院友敏1026</span>
            </template>
            <template #label>
              <span style="font-size: 1.2em;">项钱斌 13110787392</span>
            </template>
          </van-cell>
          <van-cell :border="false" center title="" is-link>
            <template #title>
              <span style="font-size: 1em;font-weight: bolder;">立即送出</span>
            </template>
            <template #default>
              <span style="color: #f52443; font-size:.8em; font-weight: bold;">大约13：49送达</span>
            </template>
          </van-cell>
          <van-cell :border="false" center  is-link>
            <template #title>
              <span style="font-size: 1em;font-weight: bolder;">支付方式</span>
            </template>
            <template #default>
              <span style="color: #f52443; font-size:.8em; font-weight: bold;">支付宝</span>
            </template>
          </van-cell>
        </van-cell-group>
      </van-col>
      <van-col span="24" style="margin-top: 10px;">
        <!--订单详情-->
        <van-cell-group  inset style="margin-top: 10px;">
          <van-cell  center>
            <span style="color: #7f7f7f;">华莱士</span>
            <van-cell v-for="i in 2" :border="false" center>
              <template #icon>
                <van-image
                    style="margin-right: .5rem;"
                    width="50"
                    height="50"
                    :lazy-load="true"
                    fit="fill"
                    src="https://gitee.com/herther/img/raw/master/img/20210914105900.png"
                />
              </template>
              <template #title>
                <span>畅享双人餐</span>
              </template>
              <template #default>
                <span style="color: #f52443;">￥28.6</span>
              </template>
              <template #label>
                <span>鸡腿堡大可</span><br>
                x {{num}}
              </template>
            </van-cell >
            <van-cell center title="配送费">
              <template #default>
                <span style="color: #ff405c;">￥1</span>
              </template>
            </van-cell>
            <van-cell  title=""  value="内容">
              <template #default>
                <span style="text-align: center;">小计 </span>
              </template>
              <template #extra>
                <span style="color: black; font-size: 1.5em;">￥{{ totalPrice  }}</span>
              </template>
            </van-cell>
          </van-cell>
        </van-cell-group>
      </van-col>
      <van-col span="24">
        <van-submit-bar :price="totalPrice*100">
          <template #button>
            <van-button color="linear-gradient(to right, #f52443, #ef5350)" @touchstart="payClick" @click="payClick" :loading="loading" loading-text="正在结算"  round size="normal">立即结算</van-button>
          </template>
        </van-submit-bar>
      </van-col>
      <!-- 数字键盘 -->
      <van-popup
          v-model="showPay"
          closeable
          round
          position="bottom"
          :style="{  height: '57%'}"
      >
        <van-cell-group :border="false">
          <van-cell :border="false">
            <template #title>
                <span style="display: block;text-align: center; margin-top: 1em; font-size: 1.2em; font-weight: bolder;">请输入支付密码</span>
              <span style="display: block;text-align: center; margin-top: 1em; font-size: .9em; color: #a3a3a3;">正在使用胖虎支付</span>
            </template>
          </van-cell>
          <van-password-input
              :value="PayPass"
              info="密码为 6 位数字"
              :focused="showKeyboard"
              @focus="showKeyboard =true"
          />
          <van-number-keyboard
              theme="custom"
              close-button-text="完成"
              random-key-order
              v-model="PayPass"
              :safe-area-inset-bottom="false"
              @close="onFinsh"
              :show="showKeyboard"
              @blur="showKeyboard = false"
          />
        </van-cell-group>

      </van-popup>
    </van-row>
  </div>
</template>

<script>

export default {
  name: "Pay",
  data(){
    return{
      showPay:false,
      PayPass:'',
      showKeyboard: false,
      num:3,
      price:28.5,
      loading:false,
    }
  },
  methods:{
    Return(){
      this.$router.replace("/merchantDetail")
    },
    payClick(){
      this.showPay =true;
    },
    onFinsh(){
      if (this.PayPass.length ==6) {
        this.showKeyboard = false;
        // this.showPay = false;
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          onClose:this.onClose

        });
      }
    },
    onClose(){
      //关闭执行回调的函数
      if (this.PayPass.length == 6 && this.PayPass == '123456' ){
          this.$toast.success({
            message:"支付成功",
            onClose:  ()=>{
              this.showPay = false
              this.$router.replace("/orderDetail")
            }
          });

      }else {
          this.$toast.fail({message:"密码错误"});
      }
    }

  },
  computed:{
    totalPrice(){
      return this.num * this.price;
    },

  },
  watch: {
    value(value) {
      // if (value.length === 6 && value !== '123456') {
      //   this.errorInfo = '密码错误';
      //
      // } else {
      //   this.errorInfo = '';
      // }
    },
  },
}
</script>

<style scoped>

</style>
